<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="service.UseOrderService" %>
<%@ page import="service.DriversService" %>
<%@ page import="beans.UseOrder" %>
<%
    // 检查session是否存在
    if(session.getAttribute("username") == null) {
        response.sendRedirect(request.getContextPath() + "/login.jsp");
        return;
    }
    String username = (String)session.getAttribute("username");
    String role = (String)session.getAttribute("role");
    Object user = session.getAttribute("user");

    // 获取订单ID
    String orderId = request.getParameter("orderId");
    UseOrderService orderService = new UseOrderService();
    DriversService driversService = new DriversService();
    UseOrder order = null;
    String driverName = "";
    try {
        order = orderService.getOrderById(orderId);
        if (order != null) {
            driverName = driversService.getDriverNameById(order.getDriverId());
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>订单详情 - 公司用车管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* 全局样式 */
        body {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            background: #f6f6f6;
            color: #333;
        }

        /* 主内容区样式 */
        .main-content {
            max-width: 1200px;
            margin: 30px auto;
            padding: 30px;
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        .page-title {
            font-size: 2.2rem;
            color: #183a8a;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #eee;
            position: relative;
            text-align: center;
        }
        .page-title::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 2px;
            background: #3ba0e9;
        }

        /* 顶部信息网格布局容器 */
        .top-sections-grid {
            display: grid;
            grid-template-columns: 1fr; /* 默认一列 */
            gap: 25px;
            margin-bottom: 25px; /* 增加底部间距 */
        }

        /* 在宽屏下显示三列 */
        @media (min-width: 992px) {
            .top-sections-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* 订单详情通用样式 */
        .info-section {
            background: #fff;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .info-section:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .section-title {
            color: #183a8a;
            font-size: 1.3rem;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }
        .info-item {
            margin-bottom: 15px;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 8px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
        }
        .info-item:hover {
            background: #e9ecef;
            transform: translateX(5px);
        }
        .info-item label {
            font-weight: bold;
            color: #183a8a;
            min-width: 120px;
            margin-right: 15px;
        }
        .info-item span {
            color: #495057;
            flex: 1;
        }
        .status-badge {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: bold;
            text-align: center;
            min-width: 100px;
        }
        .status-pending {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeeba;
        }
        .status-approved {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status-rejected {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .status-completed {
            background-color: #cce5ff;
            color: #004085;
            border: 1px solid #b8daff;
        }
        .action-buttons {
            margin-top: 40px;
            display: flex;
            gap: 20px;
            justify-content: center;
        }
        .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: bold;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 150px;
        }
        .btn i {
            margin-right: 8px;
        }
        .btn-success {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
        }
        .btn-primary {
            background: linear-gradient(135deg, #183a8a, #2450a7);
            color: white;
        }
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .error-message {
            text-align: center;
            color: #dc3545;
            margin: 20px 0;
            padding: 20px;
            background: #f8d7da;
            border-radius: 8px;
            border: 1px solid #f5c6cb;
            box-shadow: 0 2px 10px rgba(220,53,69,0.1);
        }

        /* 响应式设计 */
        @media (max-width: 991px) {
            .main-content {
                margin: 15px;
                padding: 20px;
            }
             /* 在小于992px的屏幕上，所有info-section都显示为一列 */
             .info-section {
                grid-column: span 1 !important; /* 强制不跨列 */
             }
             .top-sections-grid {
                 grid-template-columns: 1fr; /* 确保顶部区域在一列 */
             }
            .action-buttons {
                flex-direction: column;
                align-items: center;
            }
            .btn {
                width: 100%;
                max-width: 300px;
            }
        }
    </style>
</head>
<body>
    <div class="main-content">
        <h1 class="page-title">订单详情</h1>

        <% if (order != null) { %>
            <div class="top-sections-grid">
                <div class="info-section">
                    <h2 class="section-title">基本信息</h2>
                    <div class="info-item">
                        <label>订单编号：</label>
                        <span><%= order.getOrderId() %></span>
                    </div>
                    <div class="info-item">
                        <label>申请人：</label>
                        <span>员工<%= order.getEmployeeId() %></span>
                    </div>
                    <div class="info-item">
                        <label>状态：</label>
                        <span class="status-badge status-<%= order.getReviewStatus().toLowerCase() %>"><%= order.getReviewStatus() %></span>
                    </div>
                </div>

                <div class="info-section">
                    <h2 class="section-title">时间信息</h2>
                    <div class="info-item">
                        <label>用车时间：</label>
                        <span><%= new java.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(order.getExpectedDepartureTime()) %></span>
                    </div>
                    <div class="info-item">
                        <label>预计归还：</label>
                        <span><%= new java.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(order.getExpectedReturnTime()) %></span>
                    </div>
                </div>

                <div class="info-section">
                    <h2 class="section-title">用车信息</h2>
                    <div class="info-item">
                        <label>用车事由：</label>
                        <span><%= order.getUsageReason() %></span>
                    </div>
                    <div class="info-item">
                        <label>目的地：</label>
                        <span><%= order.getDestination() %></span>
                    </div>
                    <div class="info-item">
                        <label>随行人数：</label>
                        <span><%= order.getPassengers() %></span>
                    </div>
                </div>
            </div>

             <div class="info-section">
                <h2 class="section-title">车辆和司机</h2>
                <div class="info-item">
                    <label>车辆ID：</label>
                    <span><%= order.getVehicleId() %></span>
                </div>
                <div class="info-item">
                    <label>司机姓名：</label>
                    <span><%= driverName %></span>
                </div>
            </div>

            <div class="action-buttons">
                <% if ("已通过".equals(order.getReviewStatus())) { %>
                    <button onclick="updateOrderStatus('<%= order.getOrderId() %>', '已完成')" class="btn btn-success">
                        <i class="fas fa-check-circle"></i>确认完成
                    </button>
                <% } %>
                <a href="${pageContext.request.contextPath}/UseOrderServlet?action=list" class="btn btn-primary">
                    <i class="fas fa-arrow-left"></i>返回列表
                </a>
            </div>
        <% } else { %>
            <div class="error-message">
                <i class="fas fa-exclamation-circle"></i>
                <p>未找到订单信息或无权查看此订单</p>
            </div>
            <div class="action-buttons">
                <a href="${pageContext.request.contextPath}/UseOrderServlet?action=list" class="btn btn-primary">
                    <i class="fas fa-arrow-left"></i>返回列表
                </a>
            </div>
        <% } %>
    </div>

    <script>
    function updateOrderStatus(orderId, status) {
        if(confirm('确认要将订单状态更新为"已完成"吗？')) {
            fetch('${pageContext.request.contextPath}/UseOrderServlet', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'action=updateStatus&orderId=' + orderId + '&status=' + status
            })
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    alert('订单状态更新成功');
                    location.reload();
                } else {
                    alert('更新失败：' + data.message);
                }
            })
            .catch(error => {
                alert('系统错误：' + error);
            });
        }
    }
    </script>
</body>
</html> 